import React from 'react';
import {uuid} from "../assets/js/utils";

function createStore(reducer, initialState) {
    let state = initialState;
    const listeners = [];

    const subscribe = (listener) => (
        listeners.push(listener)
    );

    const getState = () => (state);

    const dispatch = (action) => {
        state = reducer(state, action);
        listeners.forEach(l => l());
    };

    return {
        subscribe,
        getState,
        dispatch,
    };
}

function reducer(state, action) {
    if (action.type === 'ADD_MESSAGE') {
        const newMessage = {
            text: action.text,
            timestamp: Date.now(),
            id: uuid(8,10)
        }
        return {
            messages: state.messages.concat(newMessage),
        };
    } else if (action.type === 'DELETE_MESSAGE') {
        console.log("action....",action);
        return {
            messages: state.messages.filter((m)=>(m.id!==action.id))
        };
    } else {
        return state;
    }
}

const initialState = { messages: [] };

const store = createStore(reducer, initialState);

class MyMessage extends React.Component {
    componentDidMount() {
        store.subscribe(() => this.forceUpdate());
    }

    render() {
        const messages = store.getState().messages;
        return (
            <div className='ui segment'>
                <MessageView messages={messages} />
                <MessageInput />
            </div>
        );
    }
}

class MessageInput extends React.Component {
    state = {
        value: '',
    };

    onChange = (e) => {
        this.setState({
            value: e.target.value,
        })
    };

    handleSubmit = () => {
        store.dispatch({
            type: 'ADD_MESSAGE',
            message: this.state.value,
            text: this.state.value
        });
        this.setState({
            value: '',
        });
    };

    render() {
        return (
            <div className='ui input'>
                <input
                    onChange={this.onChange}
                    value={this.state.value}
                    type='text'
                />
                <button
                    onClick={this.handleSubmit}
                    className='ui primary button'
                    type='submit'
                >
                    Submit
                </button>
            </div>
        );
    }
}

class MessageView extends React.Component {
    handleClick = (index,id) => {
        console.log(index,id)
        store.dispatch({
            type: 'DELETE_MESSAGE',
            index: index,
            id: id
        });
    };

    render() {
        const messages = this.props.messages.map((message, index) => (
            <div
                className='comment'
                key={index}
                onClick={() => this.handleClick(index,message.id)}
            >
                <div>
                    {message.text}<br/>
                    <p>{message.timestamp}</p>
                    <p>{message.id}</p>
                </div>

            </div>
        ));
        return (
            <div className='ui comments'>
                {messages}
            </div>
        );
    }
}

export default MyMessage;
